<template>
  <div class="main">
    <div class="top">
      <span
        style="
          color: rgba(255, 255, 0, 1);
          font-size: 16px;
          font-family: Arial;
          line-height: 16px;
          font-weight:700
        "
      >
        报警源：2020-07-16 特一联 1#调储罐液位过高报警，调储罐溢流进事故池
      </span>
    </div>

    <div class="btn" :style="{ width: width }">
      <button>仪器信息</button>
    </div>

    <div class="main-body">
      <canvas ref="myCanvas" width="1100" height="600"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      imgs: {
        img1: require("../../assets/img/confinedStation1-1.png"),
        img2: require("../../assets/img/confinedStation1-1.png"),
        img3: require("../../assets/img/confinedStation1-2.png"),
        img4: require("../../assets/img/confinedStation1-3.png"),
        img5: require("../../assets/img/confinedStation1-3.png"),
        img6: require("../../assets/img/confinedStation1-4.png"),
        img7: require("../../assets/img/confinedStation1-4.png"),
        img8: require("../../assets/img/confinedStation1-3.png"),
        img9: require("../../assets/img/confinedStation1-3.png"),
        img10: require("../../assets/img/confinedStation1-7.png"),
        img11: require("../../assets/img/confinedStation1-1.png"),
        img12: require("../../assets/img/confinedStation1-9.png"),
        img13: require("../../assets/img/confinedStation1-9.png"),
        img14: require("../../assets/img/confinedStation1-9.png"),
        img15: require("../../assets/img/confinedStation1-9.png"),
        img16: require("../../assets/img/confinedStation1-6.png"),
        img17: require("../../assets/img/confinedStation1-6.png"),
        img18: require("../../assets/img/confinedStation1-5.png"),
        img19: require("../../assets/img/confinedStation1-5.png"),
        img20: require("../../assets/img/confinedStation1-6.png"),
        img21: require("../../assets/img/confinedStation1-6.png"),
        img22: require("../../assets/img/confinedStation1-1.png"),
      },
      width: "0",
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    // 闪烁动画
    animate(ctx, img, dx, dy, dWidth, dHeight) {
      let opacity = 0; // 图片的起始x坐标
      let speed = 0.01; // 图片透明度改变的速度
      function draw() {
        // 清除画布
        ctx.clearRect(dx, dy, dWidth, dHeight);
        ctx.globalAlpha = opacity;
        // 更新图片透明度
        opacity += speed;
        if (opacity >= 1) {
          opacity = 0; // 当图片移出画布时，重新从头开始
        } else if (opacity <= 0) {
          opacity = 1;
        }
        // 绘制图片
        ctx.drawImage(img, dx, dy, dWidth, dHeight);
        // 请求下一个动画帧
        requestAnimationFrame(draw);
      }
      // 开始动画
      draw();
    },
    // 图纸初始化
    init() {
      let that = this;
      // 获取真实canvas
      const canvas = this.$refs.myCanvas;
      // 绘制方法
      const canvasWays = {
        // 绘制箭头
        drawLineArrow: function (cavParam, fromX, fromY, toX, toY, color) {
          // cavParam.scale(0.5,2);
          cavParam.beginPath();
          var headlen = 10; //自定义箭头线的长度
          var theta = 45; //自定义箭头线与直线的夹角，个人觉得45°刚刚好
          var arrowX, arrowY; //箭头线终点坐标
          // 计算各角度和对应的箭头终点坐标
          var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
          var angle1 = ((angle + theta) * Math.PI) / 180;
          var angle2 = ((angle - theta) * Math.PI) / 180;
          var topX = headlen * Math.cos(angle1);
          var topY = headlen * Math.sin(angle1);
          var botX = headlen * Math.cos(angle2);
          var botY = headlen * Math.sin(angle2);
          // cavParam.ctx.beginPath();
          //画直线
          cavParam.moveTo(fromX, fromY);
          cavParam.lineTo(toX, toY);

          arrowX = toX + topX;
          arrowY = toY + topY;
          //画上边箭头线
          cavParam.moveTo(arrowX, arrowY);
          cavParam.lineTo(toX, toY);

          arrowX = toX + botX;
          arrowY = toY + botY;
          //画下边箭头线
          cavParam.lineTo(arrowX, arrowY);

          // 填充颜色
          cavParam.fillStyle = color;
          cavParam.fill();

          cavParam.lineWidth = 2;
          cavParam.strokeStyle = color;
          cavParam.stroke();
          cavParam.closePath();
        },
        // 绘制直线
        drawLine: function (cavParam, fromX, fromY, toX, toY, color) {
          cavParam.beginPath();
          cavParam.moveTo(fromX, fromY);
          cavParam.lineTo(toX, toY);
          cavParam.strokeStyle = color;
          cavParam.stroke();
          cavParam.closePath();
        },
        // 绘制图片
        drawImg: function (
          cavParam,
          dx,
          dy,
          dWidth,
          dHeight,
          targetSrc,
          opacity
        ) {
          // 定义图片
          let img = document.createElement("img");
          img.onload = function () {
            cavParam.beginPath();
            // 设置图片透明度
            cavParam.globalAlpha = opacity;
            cavParam.drawImage(this, dx, dy, dWidth, dHeight);
            cavParam.closePath();
            // 调用动画函数
            // that.animate(cavParam, img,dx,dy,dWidth,dHeight);
          };

          img.src = targetSrc;
        },
        // 绘制闪烁动画图片
        drawAnimateImg: function (
          cavParam,
          dx,
          dy,
          dWidth,
          dHeight,
          targetSrc,
          opacity
        ) {
          // 定义图片
          let img = document.createElement("img");
          img.onload = function () {
            cavParam.beginPath();
            // 设置图片透明度
            cavParam.globalAlpha = opacity;
            // 调用动画函数
            that.animate(cavParam, img, dx, dy, dWidth, dHeight);
            cavParam.closePath();
          };

          img.src = targetSrc;
        },
        // 绘制文字
        drawText: function (cavParam, x, y, text) {
          cavParam.beginPath();
          cavParam.font = "bold 18px serif";
          cavParam.fillStyle = "red";
          cavParam.fillText(text, x, y);
          cavParam.closePath();
        },
      };

      // 获取宽度
      this.width = document.querySelector(".main-body").style.width;
      // 绘制
      if (canvas.getContext) {
        const ctx = canvas.getContext("2d");

        // 图片
        canvasWays.drawImg(ctx, 200, 520, 100, 60, this.imgs.img1, 1);
        canvasWays.drawImg(ctx, 200, 420, 100, 60, this.imgs.img2, 1);
        canvasWays.drawImg(ctx, 100, 330, 60, 70, this.imgs.img3, 1);
        if (
          this.$route.meta.title == "检查步骤1" ||
          this.$route.meta.title == "检查步骤2" ||
          this.$route.meta.title == "检查步骤3" ||
          this.$route.meta.title == "检查步骤4"
        ) {
          canvasWays.drawAnimateImg(ctx, 145, 275, 25, 25, this.imgs.img4, 1);
          canvasWays.drawAnimateImg(ctx, 145, 225, 25, 25, this.imgs.img5, 1);
          canvasWays.drawAnimateImg(ctx, 225, 160, 60, 175, this.imgs.img6, 1);
          canvasWays.drawAnimateImg(ctx, 375, 160, 60, 175, this.imgs.img7, 1);
        } else {
          canvasWays.drawImg(ctx, 145, 275, 25, 25, this.imgs.img4, 1);
          canvasWays.drawImg(ctx, 145, 225, 25, 25, this.imgs.img5, 1);
          canvasWays.drawImg(ctx, 225, 160, 60, 175, this.imgs.img6, 1);
          canvasWays.drawImg(ctx, 375, 160, 60, 175, this.imgs.img7, 1);
        }
        canvasWays.drawImg(ctx, 590, 370, 25, 25, this.imgs.img8, 1);
        canvasWays.drawImg(ctx, 690, 370, 25, 25, this.imgs.img9, 1);
        canvasWays.drawImg(ctx, 790, 370, 25, 25, this.imgs.img10, 1);
        canvasWays.drawImg(ctx, 940, 330, 100, 60, this.imgs.img11, 1);
        canvasWays.drawImg(ctx, 876, 200, 50, 50, this.imgs.img12, 1);
        canvasWays.drawImg(ctx, 776, 200, 50, 50, this.imgs.img13, 1);
        canvasWays.drawImg(ctx, 676, 200, 50, 50, this.imgs.img14, 1);
        canvasWays.drawImg(ctx, 576, 200, 50, 50, this.imgs.img15, 1);
        canvasWays.drawImg(ctx, 560, 90, 50, 50, this.imgs.img16, 1);
        canvasWays.drawImg(ctx, 460, 90, 50, 50, this.imgs.img17, 1);
        canvasWays.drawImg(ctx, 360, 90, 50, 50, this.imgs.img18, 1);
        canvasWays.drawImg(ctx, 360, 20, 50, 50, this.imgs.img19, 1);
        canvasWays.drawImg(ctx, 460, 20, 50, 50, this.imgs.img20, 1);
        canvasWays.drawImg(ctx, 560, 20, 50, 50, this.imgs.img21, 1);
        canvasWays.drawImg(ctx, 750, 0, 100, 30, this.imgs.img22, 1);
        // 棕色
        canvasWays.drawLineArrow(ctx, 0, 550, 200, 550, "#c57e1c");
        canvasWays.drawText(ctx, 0, 540, "采出液");
        canvasWays.drawLine(ctx, 100, 550, 100, 450, "#c57e1c");
        canvasWays.drawLineArrow(ctx, 100, 450, 200, 450, "#c57e1c");
        canvasWays.drawLineArrow(ctx, 300, 550, 1100, 550, "#c57e1c");
        canvasWays.drawLine(ctx, 300, 450, 700, 450, "#c57e1c");
        canvasWays.drawLineArrow(ctx, 700, 450, 700, 550, "#c57e1c");
        canvasWays.drawText(ctx, 900, 540, "去稠油处理站");

        // 灰色
        canvasWays.drawText(ctx, 0, 350, "清水软化水");
        canvasWays.drawLineArrow(ctx, 0, 360, 100, 360, "#8b8d8f");
        canvasWays.drawLine(ctx, 125, 340, 125, 240, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 125, 290, 145, 290, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 125, 240, 145, 240, "#8b8d8f");
        canvasWays.drawLine(ctx, 170, 290, 170, 160, "#8b8d8f");
        canvasWays.drawLine(ctx, 160, 230, 160, 160, "#8b8d8f");
        canvasWays.drawLine(ctx, 160, 160, 900, 160, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 900, 160, 900, 200, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 600, 160, 600, 200, "#8b8d8f");

        canvasWays.drawLine(ctx, 260, 160, 260, 10, "#8b8d8f");

        canvasWays.drawLineArrow(ctx, 260, 120, 360, 120, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 360, 120, 460, 120, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 460, 120, 560, 120, "#8b8d8f");
        canvasWays.drawLine(ctx, 560, 120, 760, 120, "#8b8d8f");

        canvasWays.drawLineArrow(ctx, 260, 50, 360, 50, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 360, 50, 460, 50, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 460, 50, 560, 50, "#8b8d8f");
        canvasWays.drawLine(ctx, 560, 50, 800, 50, "#8b8d8f");

        canvasWays.drawLineArrow(ctx, 260, 10, 750, 10, "#8b8d8f");
        canvasWays.drawLine(ctx, 800, 10, 800, 120, "#8b8d8f");
        canvasWays.drawLineArrow(ctx, 760, 120, 1100, 120, "#8b8d8f");

        // 天蓝色
        canvasWays.drawLine(ctx, 900, 210, 1050, 210, "#75f9fd");
        canvasWays.drawLine(ctx, 1050, 210, 1050, 360, "#75f9fd");
        canvasWays.drawLineArrow(ctx, 1050, 360, 1040, 360, "#75f9fd");
        canvasWays.drawLine(ctx, 940, 360, 600, 360, "#75f9fd");
        canvasWays.drawLine(ctx, 800, 360, 800, 375, "#75f9fd");
        canvasWays.drawLine(ctx, 700, 360, 700, 375, "#75f9fd");
        canvasWays.drawLine(ctx, 600, 360, 600, 375, "#75f9fd");

        canvasWays.drawLine(ctx, 700, 270, 800, 270, "#75f9fd");
        canvasWays.drawLine(ctx, 700, 270, 700, 240, "#75f9fd");
        canvasWays.drawLine(ctx, 800, 270, 800, 240, "#75f9fd");

        canvasWays.drawLine(ctx, 600, 290, 900, 290, "#75f9fd");
        canvasWays.drawLine(ctx, 600, 290, 600, 150, "#75f9fd");
        canvasWays.drawLine(ctx, 900, 290, 900, 240, "#75f9fd");

        canvasWays.drawLine(ctx, 600, 150, 260, 150, "#75f9fd");
        canvasWays.drawLineArrow(ctx, 410, 150, 410, 170, "#75f9fd");
        canvasWays.drawLineArrow(ctx, 260, 150, 260, 170, "#75f9fd");

        canvasWays.drawLine(ctx, 260, 300, 260, 410, "#75f9fd");
        canvasWays.drawLine(ctx, 410, 300, 410, 410, "#75f9fd");
        canvasWays.drawLine(ctx, 260, 410, 800, 410, "#75f9fd");
        canvasWays.drawLineArrow(ctx, 600, 410, 600, 395, "#75f9fd");
        canvasWays.drawLineArrow(ctx, 700, 410, 700, 395, "#75f9fd");
        canvasWays.drawLineArrow(ctx, 800, 410, 800, 395, "#75f9fd");

        // 红色
        canvasWays.drawLine(ctx, 500, 550, 500, 250, "red");
        canvasWays.drawLineArrow(ctx, 500, 250, 440, 250, "red");
        canvasWays.drawLine(ctx, 330, 450, 330, 250, "red");
        canvasWays.drawLineArrow(ctx, 330, 250, 290, 250, "red");
      }
    },
  },
};
</script>

<style scoped>
/* 头部 */
.top {
  width: 600px;
  height: 40px;
  background-color: #0b337d;
  padding-left: 30px;
  margin-bottom: 10px;

  line-height: 40px;
  color: rgba(255, 255, 0, 1);
  font-size: 24px;
  font-family: Arial;
  font-weight: 700;
}
/* 按钮 */
.btn {
  position: relative;

  /* background-color: skyblue; */

  margin-bottom: 10px;
  padding-right: 10px;

  text-align: right;
}
/* 主体 */
canvas {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 44, 88, 0.2), rgba(0, 44, 88, 0.2)),
    url("../../assets/background.svg") no-repeat 50% 50%;
}

.blank {
  animation: fade-in 1s infinite;
}
/* 动画 */
@keyframes fade-in {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>